<template>
  <div>
    <h1>
      Table
    </h1>
    <TableSlot>
    <div class="table-container" slot="table">
      <Table  :tableConfigArr='tableConfigArr' @selectedList='selectedList' :isMuti='false' @selectedMuti='selectedMuti' @dataChange='dataChange'  ref="table">
        <!-- <template slot="name" slot-scope="scope">
          <div @click="onClick(scope.data)">点击控制台输出对应列传过来的data属性</div>
        </template> -->
      </Table>
      <Pagination  :page='page' :size='size' :total='total' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange'></Pagination>
    </div>
    </TableSlot>
  </div>
</template>

<script>
import Table from '../components/Table.vue'
import TableSlot from '../components/tableSlot.vue'
import Pagination from '../components/Pagination.vue'
export default {
  data () {
    return {
      page: 1,
      size: 10,
      total: 100,
      tableConfigArr: [
        {
          fixed: true,
          prop: 'date',
          label: '日期',
          width: null
        },
        {
          fixed: true,
          prop: 'name',
          label: '姓名',
          width: null
        }
      ]
    }
  },
  methods: {
    dataChange (obj) {
      this.page = obj.page
      this.size = obj.size
      this.total = obj.total
    },
    updateData (obj) {
      this.$refs.table.getList({page: obj.page, size: obj.size})
    },
    selectedList (e) {
      console.log(e)
    },
    selectedMuti (e) {
      console.log(e)
    },
    handleSizeChange (e) {
      this.size = e
      this.updateData({page: this.page, size: this.size})
    },
    handleCurrentChange (e) {
      console.log(e)
      this.page = e
      this.updateData({page: this.page, size: this.size})
    }
  },
  components: {
    Table,
    TableSlot,
    Pagination
  }
}
</script>

<style scoped type='css'>

</style>
